<template>
  <admin>
    <div slot="admin-top" class="top-item">
      <div>
        <img src="../../assets/logo.png" alt="" width="50px" height="50px">
        <span>视频后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </div>

    <div slot="admin-aside">
      <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                
                
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b" :router="true">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/userinfo">用户信息</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/videomangement">
                  <i class="el-icon-menu"></i>
                  <span slot="title">视频管理</span>
                </el-menu-item>
                <el-menu-item index="/roles">
                  <i class="el-icon-menu"></i>
                  <span slot="title">角色管理</span>
                </el-menu-item>
                <el-menu-item index="/member" >
                  <i class="el-icon-document"></i>
                  <span slot="title">权限管理</span>
                </el-menu-item>
                <el-menu-item index="/datastatistics">
                  <i class="el-icon-setting"></i>
                  <span slot="title">banner管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
      </el-row>
    </div>
    <div slot="admin-main">
      <router-view></router-view>
    </div>
    <div slot="admin-footer" class="admin-footer">
      <p>XXXX有限公司</p>
    </div>
  </admin>
</template>

<script>
import Admin from './Admin.vue'
export default {
  name:'AdminItem',
  components:{
    Admin,
  },
  data() {
      return {
      }
    },
  methods: {
    logout(){
      window.sessionStorage.clear(),
      this.$router.push('/enter')
    }
  }
}
</script>

<style scoped>
.top-item{
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.top-item div{
  display: flex;
  align-items: center;
}
.top-item img{
  border-radius: 50%;
  background: #fff;
  margin-top: 5px;
  margin-right: 15px;
}
.admin-footer{
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 20px;
}
</style>